import React, { useState } from 'react'
import { FloatingBubble, Toast } from 'antd-mobile'
import { ArrowsAltOutline, ShrinkOutline } from 'antd-mobile-icons'
import ComponentList from './ComponentList';
export default () => {
  const onClick = () => {
    setShowList(!isShowList);
  }
  const [isShowList, setShowList] = useState(false);
  return (
    <>
      {
        <ComponentList onClick={() => setShowList(false)} style={isShowList ? {}: { display: 'none' }}></ComponentList>
      }
      <FloatingBubble
        style={{
          '--initial-position-bottom': '24px',
          '--initial-position-right': '24px',
          '--edge-distance': '24px',
          '--z-index': '999',
        }}
        onClick={onClick}
      >
        {
          isShowList ? 
          <ShrinkOutline fontSize={32} />
          : <ArrowsAltOutline fontSize={32} />
        }
      </FloatingBubble>
    </>
  )
}